import React, { Component } from 'react';
import '../components/List.scss'
// import logo from '../logo.svg'
import logo1 from '../images/01 (1).gif'
import logo2 from '../images/01 (2).gif'
import logo3 from '../images/01 (3).gif'
import logo4 from '../images/01 (4).gif'
import logo5 from '../images/01 (5).gif'
import logo6 from '../images/01 (6).gif'
import logo7 from '../images/01 (7).gif'
import logo8 from '../images/01 (8).gif'
import logo9 from '../images/01 (9).gif'
import logo10 from '../images/01 (10).gif'

class List extends Component {
      constructor(props){
            super(props);
            this.state={
                  arr:[
                        {name:'护肤',pic:logo1},
                        {name:'彩妆',pic:logo2},
                        {name:'香氛',pic:logo3},
                        {name:'进口酒',pic:logo4},
                        {name:'国产酒',pic:logo5},
                        {name:'精品奢货',pic:logo6},
                        {name:'食品百货',pic:logo7},
                        {name:'母婴专区',pic:logo8},
                        {name:'直播专区',pic:logo9},
                        {name:'特卖专场',pic:logo10},
                  ]
            }
      }
      render() {
            return (
                  <div className='list'>
                        {
                              this.state.arr.map((item,index)=>{
                                    return(
                                          <div className='cate' key={index}>
                                                <img src={item.pic} alt="" />
                                                <div>{item.name}</div>
                                          </div>
                                    )
                              })
                        }

                        
                  </div>
            );
      }
}

export default List;